/*
*1、绘制棋盘
    *1.1绘制棋盘中直线
* 2、绘制棋子
    *2.1绘制棋子
    * 2.2实现交互,点击下棋
    * 2.3黑白子棋交替操作
    * 2.4棋子落在棋盘交叉点上
    * 2.5设置已下棋处不得再进行操作
* 3、游戏胜负判断
    *当前所下的棋子参与到胜负判断中，此时下棋的人要么赢，要么不赢（输/继续进行）
    * 此时所下棋子的位置应当作为判断点
    * 一条线上左右颜色连续累加超过5，那么这个颜色就获胜
 */
//----------------------------------------------------

//获取到html的canvas标签
var canvas = document.querySelector('#canvas');
//获取绘制环境
var ctx = canvas.getContext('2d');

//创建棋子颜色数组
var chessColor = ['#000', '#fff'];

//棋盘数组
var maparr = [];

//判断哪方赢
var mode = [
    [1, 0],//水平方向
    [0, 1],//垂直方向
    [1, 1],//右下 左上
    [1, -1]//右上 左下
];

//----------------------------------
//将棋盘上所有交叉点创建全为0的数组
//如果当数组为1时，说明已经有棋子了
for (var i = 0; i < 14; i++) {
    maparr[i] = [];
    for (var j = 0; j < 14; j++) {
        maparr[i][j] = 0;
    }
}


//---设置游戏进行的步数-----为了实现黑白棋子交替进行操作--
var step = 0;
/*----------绘制棋盘中直线--------------
*描述绘制路径
* 开始绘制
*/
function init() {
    //----------绘制15条垂直和水平直线---------------------
    for (var i = 1; i < 15; i++) {
        //----绘制15条垂直直线------
        //在格子（30，30）处开始画线
        ctx.moveTo(30 * i, 30);
        //线画到（30，420）的位置
        ctx.lineTo(30 * i, 420);

        //----绘制15条水平直线-----
        //在格子（30，30）处开始画线
        ctx.moveTo(30, 30 * i);
        //线画到（420,30）的位置
        ctx.lineTo(420, 30 * i);
    }
    //-----开始绘制线--------------
    ctx.stroke();
}

init();

//--------绘制棋子---------------------
function drawChess(x, y, color) {
    //修改填充颜色
    ctx.fillStyle = color;
    //画圆---圆心坐标轴（x,y）--半径15--起始点角度0--终点角度为2派---
    ctx.beginPath();
    ctx.arc(x, y, 15, 0, Math.PI * 2, false);

    //ctx.fill()填充
    ctx.fill();
    ctx.stroke();
}


//-----下棋----并使棋子都在起哦安交叉线上-----------------------------
canvas.addEventListener('click', function (e) {
    // console.log('点击棋盘');


    //--------------------------------------

    //e.offsetX和offsetY可以获取到点击时的坐标
    // console.log(e.offsetX,e.offsetY);

    //--------实现所有棋子都在棋盘的交叉线上---------
    //math.floor()向下取整
    //+15---点下去的位置向右偏移15-----
    //----即使得在一个小正方形象限内位置任意点棋子都在那个交叉点出
    var dx = Math.floor((e.offsetX + 15) / 30) * 30;
    var dy = Math.floor((e.offsetY + 15) / 30) * 30;

    //点击落下棋子
    if (dx == 0 || dy == 0 || dx == 450 || dy == 450) {
        return false;
    }

    //避免已有棋子的点再下一次
    if (maparr[dx / 30 - 1][dy / 30 - 1] == 0) {
        drawChess(dx, dy, chessColor[step % 2]);
        maparr[dx / 30 - 1][dy / 30 - 1] = chessColor[step % 2];

        checkSuccess(dx / 30 - 1, dy / 30 - 1, chessColor[step % 2], mode[0]);
        checkSuccess(dx / 30 - 1, dy / 30 - 1, chessColor[step % 2], mode[1]);
        checkSuccess(dx / 30 - 1, dy / 30 - 1, chessColor[step % 2], mode[2]);
        checkSuccess(dx / 30 - 1, dy / 30 - 1, chessColor[step % 2], mode[3]);

        step++;
    }
});

//-----------判断哪方赢------要么黑赢要么白赢--------------------
// var mode=[
//     [1,0],//水平方向
//     [0,1],//垂直方向
//     [1,1],//右下 左上
//     [1,-1]//右上 左下
// ];

//------根据mode数组检测不用方向-------------
function checkSuccess(x, y, color, mode) {
    console.log(x, y, color, mode);
    var count = 0;
    for (var i = 1; i < 5; i++) {
        console.log(maparr[x + i]);
        if (maparr[x + i]) {
            if (maparr[x + i * mode[0]][y + i * mode[1]] == color) {
                count++;
            } else {
                break;
            }
        }
    }
    for (var i = 1; i < 5; i++) {
        if (maparr[x - i]) {
            if (maparr[x - i * mode[0]][y - i * mode[1]] == color) {
                count++;
            } else {
                break;
            }
        }
    }
    // console.log('水平方向有',count+1,'个',color);
    if (count >= 4) {
        if (color == '#000') {
            //显示黑棋获胜框
            $('.mol-main').css('display', 'block');
            $('.black').css('display', 'block');

            // alert('黑棋获胜');
        } else {
            //显示白棋获胜框
            $('.mol-main').css('display', 'block');
            $('.white').css('display', 'block');

            // alert('白棋获胜');
        }
    }
}

$('.btn').click(function () {
    $('.mol-main').css('display', 'none');
    location.reload()
});
